.foxui-collapse {
}

.foxui-collapse-item {
    position: relative;
    border-bottom: #e0e1e1 $--border-style-base $--border-width-base;
}

.foxui-collapse-head {
    display: flex;
    align-items: center;
    padding: $--padding-base + 2 0;

    // handle 放在 head 上
    &.foxui-collapse-handle {
        .foxui-collapse-icon {
            position: absolute;
            right: 12px;
        }
    }
}

.foxui-collapse-handle {
    cursor: pointer;

    // icon 是 handle 的子集
    .foxui-collapse-icon {
        position: relative;

        &::before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.15s ease-in 0.05s;
        }
    }

    &.is-active {
        .foxui-collapse-icon {
            &::before {
                transform: translate(-50%, -50%) rotate(90deg);
            }
        }
    }

    // icon 放在 handle 上
    &.foxui-collapse-icon {
        padding: $--padding-base;
        transition: $--color-transition-base;

        &::before {
            display: inline-block;
            transition: transform 0.15s ease-in 0.05s;
        }

        &.is-active {
            &::before {
                transform: rotate(90deg);
            }
        }

        &:hover {
            color: $--color-primary;
        }
    }
}

.foxui-collapse-icon {
    color: $--color-text-secondary;
}

.foxui-collapse-content {
    display: none;
    padding-bottom: $--padding-large;
}
